<template>
  <div class="box">
    <!--    查询区域-->
    <div>
      <el-form ref="queryForm" :model="queryForm" size="small" :inline="true" label-width="80px">
        <el-form-item label="用户名称">
          <el-input v-model="queryForm.userName" placeholder="请输入用户名称" clearable maxlength="50"
                    @clear="clearQueryFrom"></el-input>
        </el-form-item>
        <el-form-item label="用户性别">
          <el-select v-model="queryForm.sex" placeholder="请选择用户性别" @clear="clearQueryFrom" clearable>
            <el-option
              v-for="item in userSexArr"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="queryUserClick">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--    操作区域-->
    <div>
      <el-button type="success" plain size="mini" icon="el-icon-download">导出</el-button>
    </div>
    <div class="table_data" v-loading="userDataTableLoading">
      <el-table :data="userArr">
        <el-table-column label="序号" type="index" width="50" align="center" fixed="left"/>
        <el-table-column label="头像" prop="headImage" align="center" width="100">
          <template slot-scope="scope">
            <el-avatar shape="square" :size="40" :src="scope.row.headImage" fit="cover"></el-avatar>
          </template>
        </el-table-column>
        <el-table-column label="姓名" prop="userName" align="center" width="100"/>
        <el-table-column label="账号" prop="account" align="center" width="150"/>
        <el-table-column label="昵称" prop="nickName" align="center" width="100"/>
        <el-table-column label="地址" prop="address" align="center" width="200"/>
        <el-table-column label="详细地址" prop="addressDetail" align="center" width="250"/>
        <el-table-column label="联系电话" prop="phone" align="center" width="150"/>
        <el-table-column label="电子邮箱" prop="email" align="center" width="200"/>
        <el-table-column label="上次登录时间" prop="loginTime" align="center" width="200"/>
        <el-table-column label="注册时间" prop="createTime" align="center" width="200"/>
        <el-table-column label="操作" align="center" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-document"
              @click="handleDetail(scope.row.id)"
            >详情
            </el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-location-information"
              @click="handleGoodsAddress(scope.row.id)"
            >收货地址
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!--    分页-->
    <div class="page-box">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[20, 50, 100]"
        :page-size="20"
        layout="total, sizes, prev, pager, next, jumper"
        :total="totalNum">
      </el-pagination>
    </div>
    <!--    详情抽屉-->
    <div>
      <el-drawer
        title="详情"
        :visible.sync="drawerDetail"
        direction="ltr">
        <div class="userDetailDrawer">
          <el-descriptions title="" :column="1" size="small">
            <el-descriptions-item label="头像">
              <el-avatar shape="square" :size="40" :src="appUserDetail.headImage" fit="cover"></el-avatar>
            </el-descriptions-item>
            <el-descriptions-item label="姓名">{{ appUserDetail.userName }}</el-descriptions-item>
            <el-descriptions-item label="昵称">{{ appUserDetail.nickName }}</el-descriptions-item>
            <el-descriptions-item label="账号">{{ appUserDetail.account }}</el-descriptions-item>
            <el-descriptions-item label="性别">{{ appUserDetail.sex === 1 ? '男生' : '女生' }}</el-descriptions-item>
            <el-descriptions-item label="出生日期">{{ appUserDetail.birthday }}</el-descriptions-item>
            <el-descriptions-item label="家庭住址">
              {{ appUserDetail.address }}{{ appUserDetail.addressDetail }}
            </el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ appUserDetail.phone }}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{ appUserDetail.email }}</el-descriptions-item>
            <el-descriptions-item label="登录次数">{{ appUserDetail.loginNum }}</el-descriptions-item>
            <el-descriptions-item label="上次登录时间">{{ appUserDetail.loginTime }}</el-descriptions-item>
            <el-descriptions-item label="登录状态">
              <el-tag :type="appUserDetail.status === 0 ? 'warning' : appUserDetail.status === 1 ? 'success' : 'danger'"
                      size="mini">
                {{ appUserDetail.status === 0 ? '未登录' : appUserDetail.status === 1 ? '已登录' : '已注销' }}
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="注册时间">{{ appUserDetail.createTime }}</el-descriptions-item>
            <el-descriptions-item label="更新时间">{{ appUserDetail.updateTime }}</el-descriptions-item>
          </el-descriptions>
        </div>
      </el-drawer>
    </div>
    <!--    收货地址弹框-->
    <div>
      <el-dialog title="收货地址" :visible.sync="goodsAddressDialog" width="900px">
        <el-table :data="goodsAddressList" height="250">
          <el-table-column label="序号" type="index" align="center" fixed="left"/>
          <el-table-column label="姓名" prop="name" align="center"/>
          <el-table-column label="区域" prop="area" align="center" width="200"/>
          <el-table-column label="详细地址" prop="detailAddress" align="center" width="250"/>
          <el-table-column label="电话" prop="phone" align="center" width="150"/>
          <el-table-column label="是否默认地址" prop="defaultAddressOff" align="center" width="150">
            <template slot-scope="scope">
              <span>
                {{ scope.row.defaultAddressOff === 0 ? '否' : '是' }}
              </span>
            </template>
          </el-table-column>
          <el-table-column label="标签" prop="tag" align="center"/>
          <el-table-column label="新增时间" prop="createTime" align="center" width="160"/>
          <el-table-column label="修改时间" prop="updateTime" align="center" width="160"/>
        </el-table>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getUserList, getAppUserDetailData } from '@/api/user/userApi'

export default {
  name: 'AppUser',
  data () {
    return {
      userDataTableLoading: false,
      currentPage4: 0,
      queryForm: {
        userName: null,
        sex: null
      },
      userSexArr: [
        {
          label: '男',
          value: 1
        },
        {
          label: '女',
          value: 0
        }
      ],
      userArr: [],
      totalNum: 0,
      disableDel: true,
      drawerDetail: false,
      appUserDetail: {},
      goodsAddressDialog: false,
      goodsAddressList: []
    }
  },
  created () {
    this.getAppUserDataList()
  },
  methods: {
    getAppUserDataList () {
      // eslint-disable-next-line no-unused-vars
      const params = {
        pageNum: 0,
        pageSize: 20,
        queryParams: {
          identifying: 1,
          userName: this.queryForm.userName,
          sex: this.queryForm.sex
        }
      }
      this.userDataTableLoading = true
      getUserList(params).then(res => {
        this.userArr = res.data.rows
        this.totalNum = res.data.total
      }).finally(() => {
        this.userDataTableLoading = false
      })
    },
    queryUserClick () {
      this.getAppUserDataList()
    },
    resetQuery () {
      this.queryForm.userName = null
      this.queryForm.sex = null
      this.getAppUserDataList()
    },
    /* *
    * 清空按钮操作
    *  */
    clearQueryFrom () {
      this.getAppUserDataList()
    },

    /* *
    * 详情
    *  */
    handleDetail (id) {
      getAppUserDetailData(id).then(res => {
        this.drawerDetail = true
        this.appUserDetail = res.data
      })
    },

    /* *
    * 收货地址
    *  */
    handleGoodsAddress (id) {
      getAppUserDetailData(id).then(res => {
        console.log(res)
        this.goodsAddressDialog = true
        this.goodsAddressList = res.data.goodsAddressList
      })
    },
    handleSizeChange () {

    },
    handleCurrentChange () {
    }
  }
}
</script>

<style lang="less" scoped>

.table_data {
  margin-top: 10px;
  width: 100%;
}

.el-pagination {
  float: right;
}

.userDetailDrawer {
  margin: 5px;
}
</style>
